<template>
    <div>
        <div class="success">
            <div class="center"> 
                <div class="success-text">
                    <div class="success-icon">
                        <svg t="1663776486305" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2675" width="50" height="50"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#20A95F" p-id="2676"></path></svg>
                    </div>
                    <p>恭喜您购买成功！！！</p>
                </div>
                <div class="success-time">
                    <p><span>{{timetext}}</span>秒后自动返回首页。。。。。。</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        oldTime:0,
        timetext:5,
      };
    },
    mounted(){
        this.oldTime = Date.now()
        let t = this.timetext
        let successTimer = setInterval(() => {
            let nowTime = Date.now();
            console.log(nowTime - this.oldTime)
            if(nowTime - this.oldTime > (t*1000)){
                clearInterval(successTimer)
                this.$router.push('/');//地回首页
                return
            }
            this.timetext--;

        }, 1000)
    }
}
</script>

<style>
.success .center{
    width: 980px;
    margin: 0 auto;
}
.success-text{
    display: flex;
    justify-content: center;
    font-size: 17px;
    margin: 30px 0;
}
.success-text .success-icon{
    width: 50px;
    height: 50px;
}
.success-text p{
    padding: 0 10px;
}
.success-time{
    text-align: center;
}
</style>